<template>
  <div>
    <button @click="fetchData" :disabled="isLoading" class="btn btn-primary">
      <span v-if="isLoading">加载中...</span>
      <span v-else>获取数据</span>
    </button>
    <p>日期: {{ today }}</p>
    <table class="table" v-if="!requestFailed && !isLoading">
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Is Done</th>
          <th>Level</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sortedTodoList" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.Title }}</td>
          <td>{{ item.isdone }}</td>
          <td>{{ item.level }}</td>
          <td>
            <button @click="toggleIsDone(item)" class="btn btn-primary">
              {{ isLoading ? '加载中...' : (item.isdone ? '标记未完成' : '标记完成') }}
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加待办事项组件 -->
    <add-todo></add-todo>
  </div>
</template>
<script>
import AddTodo from '../components/todolist/AddTodo.vue'; // 引入添加待办事项组件

export default {
  components: {
    'add-todo': AddTodo, // 注册添加待办事项组件
  },
  data() {
    return {
      today: new Date().toLocaleDateString(),
      todoList: [],
      requestFailed: false,
      isLoading: false,
    };
  },
  computed: {
    sortedTodoList() {
      return this.todoList.sort((a, b) => b.level - a.level);
    },
  },
  methods: {
    fetchData() {
      this.requestFailed = false;
      this.isLoading = true;
      //今日所有的待办事项
      const apiUrl = 'http://1.15.7.2/api/v1/db/data/v1/pud92sjzrgeval5/ToDoNextday?where=where%3D%28remindertime%2Ceq%2Ctoday%29&limit=25&shuffle=0&offset=0';
      // 今日未完成的待办事项
      // const apiUrl = 'http://1.15.7.2/api/v1/db/data/v1/pud92sjzrgeval5/ToDoNextday?where=where%3D%28remindertime%2Ceq%2Ctoday%29~and%28isdone%2Ceq%2C0%29&limit=25&shuffle=0&offset=0';
      const headers = { 'accept': 'application/json', 'xc-auth': 'CBAkCNzQNnqYYUC1anRQjNVb38CNPTEnORZDv8yO', 'xc-token': 'CBAkCNzQNnqYYUC1anRQjNVb38CNPTEnORZDv8yO' };
      fetch(apiUrl, { method: 'GET', headers: headers })
        .then(response => response.json())
        .then(data => {
          if (data.list) this.todoList = data.list.map(item => ({ Id: item.Id, Title: item.Title, isdone: item.isdone, level: item.level }));
          this.isLoading = false;
        })
        .catch(error => {
          console.error('请求失败:', error);
          this.requestFailed = true;
          this.isLoading = false;
        });
    },
    toggleIsDone(item) {
      const newIsDoneValue = item.isdone ? 0 : 1;
      const apiUrl = `http://1.15.7.2/api/v1/db/data/v1/pud92sjzrgeval5/ToDoNextday/views/ToDoNextday/${item.Id}`;
      const headers = { 'accept': 'application/json', 'xc-auth': 'CBAkCNzQNnqYYUC1anRQjNVb38CNPTEnORZDv8yO', 'xc-token': 'CBAkCNzQNnqYYUC1anRQjNVb38CNPTEnORZDv8yO', 'Content-Type': 'application/json' };
      fetch(apiUrl, { method: 'PATCH', headers: headers, body: JSON.stringify({ isdone: newIsDoneValue }) })
        .then(response => response.json())
        .then(data => {
          const updatedItem = this.todoList.find(i => i.Id === item.Id);
          if (updatedItem) updatedItem.isdone = newIsDoneValue;
        })
        .catch(error => console.error('更新失败:', error));
    },
  },
  created() {
    this.fetchData();
  },
};
</script>
<style>
.error-message {
  color: red;
}
</style>
